<template>
  <div class="myCard">
    <el-card shadow="hover" :body-style="{ border: 'none' }">
      <div @click="goInto(domain.text,domain.title)">
        <el-row :gutter="10">
          <el-col :span="6">
            <el-image style="width:100%; height:150px" :src="domain.url" fit="cover"></el-image>
          </el-col>
          <el-col :span="18">
            <div class="story">
              <div class="title">
                <span>{{domain.title}}</span>
              </div>
              <div class="content">
                <p>{{toText(domain.text)}}</p>
              </div>
              <div class="time">
                <div class="time">{{ domain.modifiedTime }}</div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  props: ["domain"],
  mounted() {
    console.log(this.domain);
    
  },
  data() {
    return {
      moduleId: this.domain.id,
    };
  },

  methods: {
    goInto(tex, title) {
      this.$router.push({
        name: "ReConD",
        path: "/detail",
        params: {
          content: tex,
          title: title,
        },
      });
    },
    toText(content) {
      var html = content;
      return html.replace(/<[^>]*>|/g, "");
    },
  },
};
</script>
<style>
.myCard .time {
  font-weight: 100;
  position: absolute;
  bottom: 0;
  white-space: nowrap;
}
.myCard .title {
  font-weight: 900;
}
.myCard .content {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.myCard .el-card:hover {
  transform: translateY(-1rem);
  transform-origin: top;
  cursor: pointer;
}

.myCard .el-card {
  transition: 0.3s ease-in;

  margin: 20px 0;
  text-align: left;
  justify-self: center;
}
</style>